import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import { Autoplay } from 'swiper'
import Image from '@c/image'
import FilterTab from '@c/filter-tab'
import styles from './index.module.scss'
import { useRef, useState, memo, useMemo, useEffect } from 'react'
import cm from 'classnames'
import Pagination from './pagination'
import Desc from './desc'
import Link from 'next/link'
import EventBus from '@/utils/emitter'
import { pcStore } from '@/store'
import { useRecoilValue } from 'recoil'
import { useRouter } from 'next/router'

const filterData = data => {
  let da = data || []
  return da.filter(item => item.name)
}

const Index = ({ data, needTab = true, url }) => {
  const isPc = useRecoilValue(pcStore)
  const [list, setList] = useState(filterData(data))
  const swiper = useRef(null)
  const [activeIndex, setActive] = useState(0)
  const indexRef = useRef(0)
  //跳转
  const jump = () => {
    if (!list.length) {
      router.push('/')
    }
    router.push(`/vod/detail/${list[indexRef.current].id}`)
  }
  const router = useRouter()
  useEffect(() => {
    EventBus.on('updateBanner', data => {
      setList(filterData(data))
    })
    return () => {
      EventBus.offAll('updateBanner')
    }
  }, [])

  // 性能处理
  const withOutActiveIndex = useMemo(() => {
    return (
      <>
        {needTab ? (
          <div className={cm(styles.bannerTab, styles.bannerTabPhone)}>
            <FilterTab active={1} url={url} />
          </div>
        ) : null}
        <Swiper
          ref={swiper}
          allowTouchMove={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false
          }}
          speed={300}
          loop={true}
          modules={[Autoplay]}
          onRealIndexChange={e => [setActive(e.realIndex), (indexRef.current = e.realIndex)]}
        >
          {data.map(item => {
            return (
              <SwiperSlide key={item.id}>
                <Link href={`/vod/detail/${item.id}`}>
                  <Image
                    initSrc="/images/init_banner.png"
                    src={isPc ? item.posterImg : item.picImg}
                    alt={item.name + '海报图'}
                    className={styles.bg}
                  />
                </Link>
              </SwiperSlide>
            )
          })}
        </Swiper>

        {list.length > 1 ? (
          <>
            <div className={cm(styles.switch, styles.switchLeft, 'hideWhenPhone')}>
              <img loading="lazy" src="/images/ar.png" onClick={() => swiper.current.swiper.slidePrev()} alt="左切换" />
            </div>
            <div
              className={cm(styles.switch, styles.switchRight, 'hideWhenPhone')}
              onClick={() => swiper.current.swiper.slideNext()}
            >
              <img loading="lazy" src="/images/ar.png" alt="右切换" />
            </div>
          </>
        ) : null}
        <div className={cm(styles.leftMask, 'hideWhenPhone')} onClick={() => jump()} data-index={activeIndex}></div>
      </>
    )
  }, [isPc, data, list, needTab, url])

  return (
    <div className={cm(styles.slide, styles.slidePhone)}>
      {withOutActiveIndex}
      <div className={styles.mask}>
        <Desc data={{ ...list[activeIndex] }} />
        <Pagination data={list} active={activeIndex} />
      </div>
    </div>
  )
}
export default memo(Index)
